<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="AlgoGroup">
    <div class="text-box-controls">
      <i class="openFold" :class="nodeOpen ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" @click="updateNodeState()" />
      <div class="title">{{ text }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, inject } from "vue"
const getGraph = inject('getGraph')
const getNode = inject('getNode')
const nodeOpen = ref(true)
const text = ref('')
const id = ref('')
const prop = ref({ size: { width: 0, height: 0 } })
onMounted(() => {
  const node:any= getNode
  id.value = node.id
  const nodeData = node.getData()
  text.value = nodeData.title
  // 监听数据改变事件
  node.on('change:data', ({ current }:any) => {
    text.value = current.title
  })
})
function updateNodeState() {
  nodeOpen.value = !nodeOpen.value
  const node:any = getNode
  const children = node.getDescendants()
  const prop = node.getProp()
  if (nodeOpen.value) {
    const childNodes = children.filter((child:any) => child.isNode())
    node.setProp({
      size: { width: prop.value.size.width, height: prop.value.size.height }
    })
    // 显示子元素
    childNodes.forEach((child:any) => {
      child.show()
      // child.updateData({ hide: false })
    })
  } else {
    prop.value.size.width = prop.size.width
    prop.value.size.height = prop.size.height
    node.setProp({
      size: { width: 220, height: 28 }
    })
    // 隐藏子元素
    children.forEach((child:any) => {
      child.hide()
      // child.updateData({ hide: true })
    })
  }
}
</script>

<style lang="scss" scoped>
@import "src/css/designerStyles/index.scss";
@import './algo-group.scss';
</style>
